/* naster */
 @media screen and (max-width:979px) {
     nav {
         position: relative;
         margin-left: -260px;
         transition: margin-left 0.5s ease-in-out;
         transform: translateX(100%);
         z-index: 2;
     }

     main {
         position: absolute;
         margin-left: 260px;
     }

     .open-nav nav {
         position: relative;
         margin-left: 0px;
         z-index: 2;
         transition: margin-left 0.5s ease-in-out;
         transform: translateX(100%);
         box-shadow: 0 0 10px rgba(0, 0, 0, 0.5)
     }

     #master {
         position: relative;
         width: 100%;
     }

     #detail {
         position: absolute;
         width: 100%;
         height: calc(100% - 56px);
         z-index: 1;
         border: none;
     }
 }

 /* nav + master */
 @media (min-width: 980px) and (max-width: 1599px) {
     body {
         margin-left: -260px;
         transition: margin-left 0.5s ease-in-out;
     }

     .open-nav {
         margin-left: 0px;
         transition: margin-left 0.5s ease-in-out;
         box-shadow: none;
     }

     #detail {
         position: absolute;
         width: calc(100% - 260px);
         height: calc(100% - 56px);
         z-index: 1;
         border: none;
     }

 }


 /* nav + master + detail */
 @media screen and (min-width: 1600px) {
     body {
         margin-left: -260px;
         transition: margin-left 0.5s ease-in-out;
         box-shadow: none;
     }

     .open-nav {
         margin-left: 0px;
         transition: margin-left 0.5s ease-in-out;
         box-shadow: none;
     }
 }